<template>
    <cover-view style="width: 100%;height: 100vh">
			<cover-view style="position: fixed;top:40rpx;left:40rpx;z-index: 999999999999">
				<cover-view class="state-navbar"></cover-view>
				<cover-view class="backBox flex flex-row-center flex-col-center ">
					<cover-image class="backImg" :src="$staticPath('groupBuy/iconLeft.png')" @tap="backClick"></cover-image>
				</cover-view>
			</cover-view>
			<video
				v-if="videoUrl"
				:show-loading="true"
				:loop="false"
				:controls="options.pageType==1"
				:enable-progress-gesture="false"
				:http-cache="true"
				:page-gesture="false"
				:show-fullscreen-btn="false"
				:show-play-btn="options.pageType==1"
				:src="videoUrl"
				:poster="coverPicture"
				@ended="ended"
				object-fit="contain"
				:style="'width: ' + windowWidth + 'px; height: ' + windowHeight + 'px; background-color: #000000;'"
			/>
    </cover-view>
</template>

<script>
import { mapState } from 'vuex';
import { getVideoDetail } from '@/common/api/video.js';
import config from '@/common/config/config.js';
const http = config.env
export default {
    data() {
			return {
				windowWidth: null,
				windowHeight: null,

				videoUrl: null,
				coverPicture: null,
				salt: null,
				options: {}
			}
    },
    computed: {
			...mapState({
				isLogin: state => state.user.isLogin,
			})
    },
    onLoad(options) {
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			this.options = options
			let id = options.articleId
			if (id) {
				getVideoDetail(id).then(res => {
					if (res.code == 200) {
						this.videoUrl = res.data.filePath
						this.coverPicture = res.data.coverPicture;
					}
				})
			}
			if (options.salt) {
				uni.setStorageSync('userSalt', options.salt)
				this.salt = options.salt
			}
    },
    methods: {
        backClick() {
					uni.setStorageSync('tabbarPageIndex', 0)
					this.$store.commit('setTabbarPageUrl', 0)
					this.$switchTab('/pages/tabbar/index')
        },
        // 视频播放结束
        ended() {
            uni.showModal({
							title: '提示',
							content: '去下载',
							showCancel: true,
							cancelText: '取消',
							cancelColor: '#000000',
							confirmText: '确定',
							confirmColor: '#E60000',
							success: (result) => {
								if(result.confirm){
									setTimeout(() => {
											window.location.href = http.ycwmWeb+'/download/#/?salt='+ this.salt
									}, 1000)
								}
							},
							fail: ()=>{},
							complete: ()=>{}
            });
        },
    }
}
</script>
<style lang="scss" scoped>
.container {
    width: 100vw;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ccc;
}

.msgBox {
    width: 550rpx;
    height: 630rpx;
    overflow: initial !important;
}

.color3 {
    position: absolute;
    z-index: 999;
    bottom: 50%;
    left: -10rpx;
    font-size: 30rpx;
    z-index: 999;
    color: rgba(192, 77, 14, 1);
    background-color: red;
}

.circle {
    right: 80rpx;
    top: -60rpx;
    width: 50rpx;
    height: 50rpx;
    padding: 30rpx;
    position: absolute;
    z-index: 99999999;
    border-radius: 50rpx;
}

.alertBox {
    transform: translateX(-45%);
    left: 50%;
    top: calc(50vh - 315rpx);
    z-index: 9999;
}

.back {
    width: 50rpx;
    height: 50rpx;
    top: 50rpx;
    left: 50rpx;
    z-index: 999;
}

.backBox {
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.2);
}

.backImg {
    width: 26rpx;
    height: 40rpx
}

.state-navbar {
    height: var(--status-bar-height);
    width: 100%;
}
</style>
